<template>
	<el-container>
		<!-- <el-header>
			<div class="left-panel">
				<el-button v-auths="['cam@add','admin']" type="primary" icon="el-icon-plus" @click="add"></el-button>
				<el-button v-auths="['cam@delete','admin']" type="danger" plain icon="el-icon-delete"
					:disabled="selection.length==0" @click="batch_del"></el-button>
			</div>
			<div class="right-panel">
				<Unit v-if="userInfo.system" v-model="searchData.unit" placeholder="请选择所属单位"></Unit>
				<el-input v-model="searchData.keyword" placeholder="设备名称/设备序列号/门店名称" clearable></el-input>

				<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
			</div>
		</el-header> -->
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" :params="params" orderBy="sort" row-key="id"
				@selection-change="selectionChange" stripe :hideDo="true">
				<!-- <el-table-column type="selection" width="50"></el-table-column> -->
				<el-table-column label="公司" prop="device.unit.name">
				</el-table-column>
				<el-table-column label="所属门店" prop="device.store.name">
					<!-- <template #default="scope">
						 <el-tooltip v-if="scope.row.store.deploying === true" class="box-item" effect="light" content="布防"
							placement="bottom">
							<BuFangIcon style="width:20px;height:20px;" />
						</el-tooltip>
						<el-tooltip v-else class="box-item" effect="light" content="撤防" placement="bottom">
							<CeFangIcon style="width:20px;height:20px;" />
						</el-tooltip>
						<el-tooltip v-if="scope.row.store.autoDeploying === true" effect="light" content="自动"
							placement="bottom">
							<AutoBuFangIcon style="width:20px;height:20px;fill:#f90" class="u-m-l-10 u-m-r-10" />
						</el-tooltip>
						<el-tooltip v-else class="u-m-l-10 u-m-r-10" effect="light" content="手动" placement="bottom">
							<AutoNoBuFangIcon style="width:20px;height:20px;fill:#999" class="u-m-l-10 u-m-r-10" />
						</el-tooltip>
						{{scope.row.store.name}}
					</template> -->
				</el-table-column>
				<el-table-column label="设备" prop="device.name">
				</el-table-column>
				<el-table-column label="通道名" prop="name">
				</el-table-column>
				<el-table-column label="通道号" prop="channelId">
				</el-table-column>
				<el-table-column label="在线状态" prop="online">
					<template #default="scope">
						<div v-if="scope.row.online">
							<sc-status-indicator type="success"></sc-status-indicator> 在线
						</div>
						<div v-if="!scope.row.online">
							<sc-status-indicator pulse type="danger"></sc-status-indicator> 离线
						</div>
						<!-- <el-icon v-if="scope.row.online" style="color: #67C23A;"><el-icon-circle-check-filled /></el-icon>
						<el-icon v-else style="color: #F56C6C;"><el-icon-circle-close-filled /></el-icon> -->
					</template>
				</el-table-column>
				<el-table-column label="最后上线时间" prop="lastOnLine">
				</el-table-column>
				<el-table-column label="最后离线时间" prop="lastOffLine">
				</el-table-column>
				<el-table-column label="离线原因" prop="offlineReasonType">
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>

	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess"
		@closed="dialog.save=false"></save-dialog>
	<configDialog v-if="dialog.config" ref="configDialog" @success="handleSaveSuccess" @closed="dialog.config=false">
	</configDialog>
</template>

<script>
	import BuFangIcon from '@/assets/icons/BuFang'
	import CeFangIcon from '@/assets/icons/CeFang'
	import AutoBuFangIcon from '@/assets/icons/AutoBuFang'
	import AutoNoBuFangIcon from '@/assets/icons/AutoNoBuFang'
	export default {
		name: 'store',
		components: {
			BuFangIcon,
			CeFangIcon,
			AutoBuFangIcon,
			AutoNoBuFangIcon
		},
		data() {
			return {
				dialog: {
					save: false,
					config: false
				},
				searchData: {
					unit: {
						id: null
					}
				},
				apiObj: this.$API.api.cam.clist,
				params: {},
				selection: [],
				userInfo: {}
			}
		},
		mounted() {
			this.userInfo = this.$TOOL.data.get("USER_INFO")
		},
		methods: {
			//搜索
			upsearch() {
				let data = {
					keyword: this.searchData.keyword,
					unit: {
						id: this.searchData.unit.id
					}
				}
				this.$refs.table.upData(data)
			},
			//窗口新增
			add() {
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.saveDialog.open()
				})
			},
			//窗口编辑
			table_edit(row) {
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.saveDialog.open('edit').setData(row)
				})
			},
			// 配置
			table_config(row) {
				this.dialog.config = true
				this.$nextTick(() => {
					this.$refs.configDialog.open().setData(row)
				})
			},
			//页面新增
			addPage() {
				this.$router.push({
					path: '/template/list/crud/detail',
				})
			},
			//页面编辑
			table_edit_page(row) {
				this.$router.push({
					path: '/template/list/crud/detail',
					query: {
						id: row.id
					}
				})
			},
			//查看
			table_show(row) {
				this.dialog.info = true
				this.$nextTick(() => {
					this.$refs.infoDialog.setData(row)
				})
			},
			table_manager(row) {
				this.dialog.manager = true
				this.$nextTick(() => {
					this.$refs.managerDialog.setData(row)
				})
			},
			table_managerAdmin(row) {
				this.dialog.managerAdmin = true
				this.$nextTick(() => {
					this.$refs.managerAdminDialog.setData(row)
				})
			},
			//删除明细
			async table_del(row, index) {
				var reqData = {
					id: row.id
				}
				var res = await this.$API.api.cam.delete.post(reqData);
				if (res.code == 200) {
					this.$refs.table.removeIndex(index)
					this.$message.success("删除成功")
				} else {
					this.$alert(res.message, "提示", {
						type: 'error'
					})
				}
			},
			//批量删除
			async batch_del() {
				var confirmRes = await this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
					type: 'warning',
					confirmButtonText: '删除',
					confirmButtonClass: 'el-button--danger'
				}).catch(() => {})

				if (!confirmRes) {
					return false
				}

				var ids = this.selection.map(v => v.id)
				let id = ids.join(",")

				const res = this.$API.api.cam.delete.post({
					id: id
				})
				if (res) {
					this.$message.success("操作成功")
					this.$refs.table.removeKeys(ids)
					//this.$refs.table.upData()
				}
			},
			//表格选择后回调事件
			selectionChange(selection) {
				this.selection = selection
			},
			//本地更新数据
			handleSaveSuccess() {
				//为了减少网络请求，直接变更表格内存数据
				// if (mode == 'add') {
				// 	this.$refs.table.unshiftRow(data)
				// } else if (mode == 'edit') {
				// 	this.$refs.table.updateKey(data)
				// }

				//当然也可以暴力的直接刷新表格
				this.$refs.table.refresh()
			}
		}
	}
</script>

<style>
</style>
